<template>
  <div
    class="container"
    v-loading.fullscreen.lock="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <template v-if="this.$route.query.type">
      <el-row>
        <el-col :span="24">
          <el-button @click="ongoback" icon="el-icon-back" type="primary"
            >返回上一页</el-button
          >
        </el-col>
      </el-row>
      <rz-height></rz-height>
    </template>
    <el-row type="flex">
      <el-col :span="24" style="display: flex">
        <div style="flex: 1">
          <el-select
            v-model="queryInfo.cityCode"
            placeholder="请选择单位所属区域"
            @change="onRegionList"
          >
            <el-option
              v-for="item in regionList"
              :key="item.areaCode"
              :label="item.areaName"
              :value="item.areaCode"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="queryInfo.bodyindustry"
            placeholder="请选择单位业态"
            clearable
          >
            <el-option
              v-for="item in bodyindustryList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="queryInfo.jurisdiction"
            placeholder="请选择人员类别"
            clearable
          >
            <el-option
              v-for="item in dimension"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>

          <el-select
            v-model="queryInfo.codecolor"
            placeholder="请选择信息码"
            clearable
            class="selectwidth"
          >
            <el-option
              v-for="item in informationCode"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="queryInfo.idcolor"
            placeholder=" 请选择身份证状态"
            clearable
            class="selectwidth"
          >
            <el-option
              v-for="item in Information"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="queryInfo.jkzcolor"
            placeholder="请选择健康证明状态"
            clearable
            class="selectwidth"
          >
            <el-option
              v-for="item in Information"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="queryInfo.kscolor"
            placeholder="请选择考试状态"
            clearable
            class="selectwidth"
          >
            <el-option
              v-for="item in Information"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <!-- idcolor1212 -->
          <el-select
            v-model="queryInfo.position"
            placeholder="请选择职位"
            clearable
            class="selectwidth"
          >
            <el-option
              v-for="item in Position"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="queryInfo.status"
            placeholder="请选择入职状态"
            clearable
            class="selectwidth"
          >
            <el-option
              v-for="item in Status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
<!-- 
          <el-select
            v-model="queryInfo.unittype"
            placeholder="请选择其他类别"
            clearable
            multiple
            collapse-tags
            class="selectwidth"
          >
            <el-option
              v-for="item in category"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> -->
          <el-checkbox v-model="queryInfo.isspecialfood">特殊食品</el-checkbox>
          <!-- <el-checkbox v-model="queryInfo.jurisdiction"
            >食品安全管理员</el-checkbox
          > -->
              <el-input
                maxlength="50"
            v-model="queryInfo.unitname"
            placeholder="请输入单位名称"
            style="width: 217px"
            clearable
          ></el-input>
          <el-input
                maxlength="50"
            v-model="queryInfo.nameOrmobile"
            placeholder="请输入从业人员姓名\手机号"
            style="width: 217px"
            clearable
          ></el-input>

          <!-- 排序 -->
          <el-select
            v-model="queryInfo.type"
            placeholder="请选择其他类别"
            class="selectwidth"
          >
            <el-option
              v-for="item in sortList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-button
            type="primary"
            icon="el-icon-search"
            v-no-click
            @click="onquery"
            >查询</el-button
          >
          <el-button @click="download" v-no-click="10000">导出Excel</el-button>
        </div>
      </el-col>
    </el-row>

   <!-- <el-row type="flex">
      <el-col :span="24" style="display: flex">
        
        <div style="flex: 1"> -->
     <!-- <el-input
                maxlength="50"
            v-model="queryInfo.unitname"
            placeholder="请输入单位名称"
            style="width: 217px"
            clearable
          ></el-input>
          <el-input
                maxlength="50"
            v-model="queryInfo.nameOrmobile"
            placeholder="请输入从业人员姓名\手机号"
            style="width: 217px"
            clearable
          ></el-input>

    
          <el-select
            v-model="queryInfo.type"
            placeholder="请选择其他类别"
            class="selectwidth"
          >
            <el-option
              v-for="item in sortList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-button
            type="primary"
            icon="el-icon-search"
            v-no-click
            @click="onquery"
            >查询</el-button
          >
          <el-button @click="download" v-no-click="10000">导出Excel</el-button> -->
        <!-- </div>
      </el-col>
   </el-row> -->
    <rz-height></rz-height>
    <el-row>
      <el-col :span="24" style="display: flex; justify-content: flex-end">
        <el-dropdown :hide-on-click="false">
          <el-button type="primary">
            <i class="el-icon-s-grid"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown" class="el_dropdown_wapper">
            <el-dropdown-item v-for="(item, index) in list" :key="index">
              <el-checkbox v-model="item.value">{{ item.name }}</el-checkbox>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
    <rz-height></rz-height>

    <el-table :data="tableData" border style="width: 100%" stripe>
      <el-table-column
        prop="tname"
        label="姓名"
        v-if="list[0].value"
        width="80"
      >
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="手机号"
        v-if="list[1].value"
        width="100"
      >
        <template slot-scope="scope">
          {{ scope.row.mobile }}
        </template>
      </el-table-column>
      <el-table-column prop="sex" label="性别" v-if="list[2].value" width="80">
      </el-table-column>
      <el-table-column
        prop="national"
        label="民族"
        v-if="list[3].value"
        width="80"
      >
      </el-table-column>
      <el-table-column
        prop="codecolor"
        label="信息码"
        v-if="list[4].value"
        width="80"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.codecolor == 0">待完善</span>
          <span v-if="scope.row.codecolor == 1" class="green">绿码</span>
          <span v-if="scope.row.codecolor == 2" class="yellow">黄码</span>
          <span v-if="scope.row.codecolor == 3" class="red">红码</span>
        </template>
      </el-table-column>
   <el-table-column
        prop="classHoursSum"
        label="课时(分钟)"
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="validuntil"
        label="到期日期"
        v-if="list[5].value"
        width="100"
      >
      </el-table-column>

      <el-table-column
        prop="dabhstate"
        label="身份证状态"
        v-if="list[6].value"
        width="100"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.dabhstate == 0">待完善</span>
          <span v-if="scope.row.dabhstate == 1" class="green">未到期</span>
          <span v-if="scope.row.dabhstate == 2" class="yellow">即将到期</span>
          <span v-if="scope.row.dabhstate == 3" class="red">已到期</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="idvalid"
        label="身份证有效期至"
        v-if="list[7].value"
        width="100"
      >
      <template slot-scope="scope">
       <div>{{scope.row.idvalid=='2111-01-01'?'长期':scope.row.idvalid}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="jkzstate"
        label=" 健康证明状态"
        v-if="list[8].value"
        width="100"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.jkzstate == 0">待完善</span>
          <span v-if="scope.row.jkzstate == 1" class="green">未到期</span>
          <span v-if="scope.row.jkzstate == 2" class="yellow">即将到期</span>
          <span v-if="scope.row.jkzstate == 3" class="red">已到期</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="jkvalid"
        label="健康证明有效期至"
        v-if="list[9].value"
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="ksstate"
        label="考试状态"
        v-if="list[10].value"
        width="100"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.ksstate == 0">待完善</span>
          <span v-if="scope.row.ksstate == 1" class="green">未到期</span>
          <span v-if="scope.row.ksstate == 2" class="yellow">即将到期</span>
          <span v-if="scope.row.ksstate == 3" class="red">已到期</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="ksvalid"
        label="考试有效期至"
        v-if="list[11].value"
        width="100"
      >
         <template slot-scope="scope">
       <div>{{scope.row.ksvalid=='2111-01-01'?'长期':scope.row.ksvalid}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="入职状态"
        v-if="list[12].value"
        width="130"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.status == '在职'">已入职</div>
          <div v-else-if="scope.row.status == '申请入职'" class="red">
            入职申请待通过
          </div>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="position"
        label="职位"
        v-if="list[13].value"
        width="80"
      >
      </el-table-column>
      <el-table-column
        prop="jurisdiction"
        label="角色"
        v-if="list[14].value"
        width="100"
      >
      </el-table-column>
         <el-table-column
        prop="unitname"
        label="单位名称"
        v-if="list[18].value"
      >
 <template slot-scope="scope">
          <div>{{scope.row.operatorName||scope.row.unitname}}</div>
        </template>

      </el-table-column>
      <!-- <el-table-column
        prop="jurisdiction"
        label="食品安全管理员"
        v-if="list[15].value"
        width="120"
      >
      </el-table-column> -->
      <el-table-column
        prop="district"
        label="区域街道"
        v-if="list[15].value"
        width="160"
      >
         <template slot-scope="scope">
          <div >{{scope.row.district}}-{{scope.row.street}}</div>
      
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="street"
        label="所属街道"
        v-if="list[16].value"
        width="100"
      >
      </el-table-column> -->
      <el-table-column
        prop="bodyindustry"
        label="单位业态"
        v-if="list[16].value"
        width="200"
      >
        <template slot-scope="scope">
                <div >{{scope.row.bodyindustry}}{{ scope.row.bodyindustryremarks?"--"+scope.row.bodyindustryremarks:''}}</div>
              </template>
      </el-table-column>
      <!-- <el-table-column
        prop="bodyindustryremarks"
        label="单位业态备注"
        v-if="list[18].value"
        width="150"
      >
      </el-table-column> -->
      <el-table-column
        prop="identify"
        label="统一社会信用代码"
        v-if="list[17].value"
        width="200"
      >
      </el-table-column>
   
      <el-table-column
        prop="address"
        label="单位地址"
        v-if="list[19].value"
        width="400"
      >
      </el-table-column>
      <el-table-column
        prop="newlicenseno"
        label="许可证编号"
        v-if="list[20].value"
        width="200"
      >
      </el-table-column>
         <el-table-column
        prop="operatorName"
        label="经营者名称"
        v-if="list[21].value"
        width="200"
      >
      </el-table-column>
      <!-- <el-table-column
        prop="isspecialfood"
        label="是否特殊食品"
        v-if="list[24].value"
        width="100"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.isspecialfood == 1">是</div>
          <div v-else>否</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="unittype"
        label="从事其它产品"
        v-if="list[25].value"
        width="150"
      >
        <template slot-scope="scope">
          {{ scope.row.unittype.replace(/&/g, ",") }}
        </template>
      </el-table-column> -->
      <!-- <el-table-column
        prop="bodyindustryremarks"
        label="单位业态备注"
        v-if="list[25].value"
      >
      </el-table-column> -->
      <el-table-column
        prop="createdatetime"
        label="注册日期"
        width="100"
        v-if="list[22].value"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="primary" size="small"
            >人员信息码</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="paginations">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="queryInfo.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryInfo.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog title="查看人员信息" :visible.sync="dialogVisible" width="70%">
      <el-card shadow="always">
        <h2>人员信息</h2>
        <rz-height></rz-height>
        <el-row>
          <el-col :span="4">
            <vue-qr
              :text="userData.url"
              :margin="0"
              :colorDark="userData.color"
              :logoScale="0.3"
              :size="90"
            ></vue-qr>
          </el-col>
          <el-col :span="19">
            <el-row>
              <el-col :span="12"> 姓名：{{ user.thename }} </el-col>
              <el-col :span="12"> 角色：{{ user.safetyAdmin==1?'食品安全员':'从业人员' }} </el-col>
            </el-row>
            <rz-height></rz-height>
            <rz-height></rz-height>
            <el-row>
              <el-col :span="12"> 手机号码：{{ user.mobile }} </el-col>
              <el-col :span="12"> 注册日期：{{ user.createdate }}</el-col>
            </el-row>
            <rz-height></rz-height>
            <rz-height></rz-height>
            <el-row>
              <el-col :span="12">
                信息码到期日期：{{ userData.validuntil }}

                <span v-if="userData.validuntilNum < 0" class="red">
                  已到期
                </span>
                <span v-else-if="userData.validuntilNum < 180" class="red">
                  ({{ userData.validuntilNum }}天后到期)
                </span>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-card>
      <rz-height></rz-height>

      <el-card shadow="always">
        <h2>身份证信息</h2>
        <rz-height></rz-height>
        <el-row>
          <el-col :span="4">
            <el-image
              style="width: 90px; height: 90px"
              :src="user.headurl"
              v-if="user.headurl"
              fit="cover"
            ></el-image>
            <div
              v-else
              style="line-height: 90px; text-align: center; width: 90px"
            >
              暂无头像
            </div>
          </el-col>
          <el-col :span="19">
            <el-row>
              <el-col :span="8"> 姓名：{{ user.thename }} </el-col>
              <!-- <el-col :span="8">
                性别：{{ user.sex == 1 ? "男" : "女" }}
              </el-col>
              <el-col :span="8">
                年龄：{{
                  user.datebirth
                    ? new Date().getFullYear() - user.datebirth.substring(0, 4)
                    : ""
                }}
              </el-col> -->
            </el-row>
            <rz-height></rz-height>
            <rz-height></rz-height>
            <!-- <el-row>
              <el-col :span="12">
                籍贯：{{ user.provinceName }}-- {{ user.cityName }}
              </el-col>
              <el-col :span="12"> 民族：{{ user.national }} </el-col>
            </el-row> -->
            <rz-height></rz-height>
            <rz-height></rz-height>
            <el-row>
              <el-col :span="12"> 证件类型：{{ user.documentTypeStr }}</el-col>
              <el-col :span="12"> 证件号码：{{ user.dabh }}</el-col>
              <!-- <el-col :span="12">
                有效期至：{{
                  user.validuntil == "2111-01-01" ? "长期" : user.validuntil
                }}
                <span v-if="user.validuntilNum < 0" class="red"> 已到期 </span>
                <span v-else-if="user.validuntilNum < 180" class="red">
                  ({{ user.validuntilNum }}天后到期)
                </span>
              </el-col> -->
            </el-row>
          </el-col>
        </el-row>
      </el-card>

      <rz-height></rz-height>

      <el-card shadow="always">
        <h2>工作单位信息</h2>
        <rz-height></rz-height>

        <el-table :data="user.list" border style="width: 100%" stripe>
          <el-table-column prop="districtName" label="区域街道" width="150">
            <template slot-scope="scope">
              <div>
                {{ scope.row.districtName }}--
                {{ scope.row.streetName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="unitname" label="工作单位名称">
          </el-table-column>

          <el-table-column prop="bodyindustry" label="单位业态" width="200">
            <template slot-scope="scope">
              <div>
                {{ scope.row.bodyindustry }}
            {{ scope.row.bodyindustryremarks?"--"+scope.row.bodyindustryremarks:''}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="tname" label="入职状态" width="80">
            <template slot-scope="scope">
              <div v-if="scope.row.status == '1'">已入职</div>
              <div v-else-if="scope.row.status == '0'" class="red">
                入职申请待通过
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="tname" label="职位" width="80">
            <template slot-scope="scope">
              <div v-if="scope.row.position == '1'">全职</div>
              <div v-else-if="scope.row.position == '2'">兼职</div>
            </template>
          </el-table-column>
          <el-table-column prop="tname" label="入职角色" width="100">
            <template slot-scope="scope">
              <div v-if="scope.row.isadmin == 1">
               食品安全员
              </div>
              <div v-else-if="scope.row.isadmin == 2">
              行政管理员
              </div>
              <div v-else-if="scope.row.isadmin == 3">
              企业负责人
              </div>
              <div v-else-if="scope.row.isadmin == 4">
              食品安全总监
              </div>
              <div v-else>
              从业人员
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="entrytime" label="入职日期" width="120">
          </el-table-column>
        </el-table>
      </el-card>

      <rz-height></rz-height>

      <el-row :gutter="10">
        <el-col :span="12">
          <el-card shadow="always">
            <h2>健康证明信息</h2>
            <template v-if="user.theimgurl">
              <rz-height></rz-height>
              <el-image
                :src="user.theimgurl"
                fit="cover"
                style="width: 400px; height: 200px"
                :preview-src-list="[user.theimgurl]"
              ></el-image>
              <rz-height></rz-height>
              <el-row>
                <el-col :span="24"> 发证机构:{{ user.institutions }}</el-col>
              </el-row>
              <rz-height></rz-height>
              <el-row>
                <el-col :span="24">
                  有效期至:{{ user.validitycate }}
                  <span v-if="user.validitycateNum < 0" class="red">
                    已到期
                  </span>
                  <span v-else-if="user.validitycateNum < 30" class="red">
                    ({{ user.validitycateNum }}天后到期)
                  </span>
                </el-col>
              </el-row>
            </template>
            <template v-else>
              <h1 class="red">待完善</h1>
            </template>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="always">
            <h2>食安考试信息</h2>
            <template v-if="user.tpiTestPaperTitle||user.superviseUnitName">
              <rz-height></rz-height>
              <el-row>
                <el-col :span="24">
                  试卷名称:{{ user.tpiTestPaperTitle||user.superviseUnitName }}</el-col
                >
              </el-row>
              <rz-height></rz-height>
              <el-row>
                <el-col :span="12"> 考试时间:{{ user.tpiCreateTime }}</el-col>
              </el-row>
              <rz-height></rz-height>
              <el-row>
                <el-col :span="12">
                  考试结果:
                  <span v-if="user.tpiReplyResult" class="green"> 合格 </span>
                  <span v-else class="red"> 不合格</span>
                </el-col>
              </el-row>
              <rz-height></rz-height>
              <el-row>
                <el-col :span="12">
                  考试类别:{{
                    user.category == 1 ? "从业人员" : "食品安全员"
                  }}</el-col
                >
              </el-row>
              <rz-height></rz-height>
              <el-row>
                <el-col :span="24">
                  有效期至:{{
                    user.validuntilTwo == "2111-01-01"
                      ? "长期"
                      : user.validuntilTwo
                  }}
                  <span v-if="user.validuntilTwoNum < 0" class="red">
                    已到期
                  </span>
                  <span v-else-if="user.validuntilTwoNum < 30" class="red">
                    ({{ user.validuntilTwoNum }}天后到期)
                  </span>
                </el-col>
              </el-row>
              <rz-height :height="135"></rz-height>
            </template>
            <template v-else>
              <h1 class="red">待完善</h1>
            </template>
          </el-card>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import vueQr from "vue-qr";
export default {
  components: {
    vueQr,
  },
  created() {
    switch (this.$route.query.type) {
      case "0":
        this.queryInfo.bodyindustry = "食品生产经营者";
        break;
      case "1":
        this.queryInfo.bodyindustry = "食品流通经营者";
        break;
      case "2":
        this.queryInfo.bodyindustry = "餐饮服务经营者";
        break;
      case "3":
        this.queryInfo.bodyindustry = "单位食堂";

        break;
      case "4":
        this.queryInfo.jurisdiction = "0";
        break;
      case "5":
        this.queryInfo.jurisdiction = "1";
        break;
      // case "6":
      //   this.queryInfo.jurisdiction = true;
      //   break;
      case "10":
        this.queryInfo.codecolor = "1";
        break;
      case "11":
        this.queryInfo.codecolor = "2";
        break;
      case "12":
        this.queryInfo.codecolor = "3";
        break;
      case "13":
        this.queryInfo.codecolor = "0";
        break;
      case "7":
        this.queryInfo.isspecialfood = true;
        break;
      case "8":
        this.queryInfo.unittype = ["从事食用农产品"];
        break;
      case "9":
        this.queryInfo.unittype = ["从事冷藏冷冻农产品"];
        break;
    }
    if (this.$route.query.code == "320500") {
      this.queryInfo.cityCode = this.$route.query.code;
      this.queryInfo.districtcode = "";
    } else {
      this.queryInfo.cityCode = this.$route.query.code;
      this.queryInfo.districtcode = this.$route.query.code;
    }
    // regionList
    this.query();
    this.findListByParentCode();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      url: "121331",
      queryInfo: {
        codecolor: "",
        isspecialfood: false,
        jurisdiction: "",
        districtcode: "",
        cityCode: "",
        bodyindustry: "",
        isPage: 0,
        page: 1,
        pageSize: 20,
        searchValue: "",
        idcolor: "",
        jkzcolor: "",
        isadmin: "",
        nameOrmobile: "",
        position: "",
        unittype: [],
        kscolor: "",
        status: "",
        unitname: "",
        type: "5",
        streetCode: "",
      },
      loading: false,
      list: [
        {
          name: "姓名",
          value: true,
        },
        {
          name: "手机号",
          value: true,
        },
        {
          name: "性别",
          value: false,
        },
        {
          name: "民族",
          value: false,
        },
        {
          name: "信息码",
          value: true,
        },
        {
          name: "到期日期",
          value: true,
        },
        {
          name: "身份证状态",
          value: false,
        },
        {
          name: "身份证有效期至",
          value: false,
        },

        {
          name: "健康证明状态",
          value: false,
        },
        {
          name: "健康证明有效期至",
          value: false,
        },

        // 9
        {
          name: "考试状态",
          value: false,
        },
        {
          name: "考试有效期至",
          value: false,
        },
        {
          name: " 入职状态",
          value: false,
        },

        // 13
        {
          name: "职位",
          value: false,
        },

        {
          name: "角色",
          value: true,
        },
        // {
        //   name: "食品安全管理员",
        //   value: false,
        // },
        // 16
        {
          name: "区域街道",
          value: true,
        },
        // {
        //   name: "所属街道",
        //   value: false,
        // },
        {
          name: "单位业态",
          value: true,
        },
        // {
        //   name: "单位业态备注",
        //   value: false,
        // },
        {
          name: "统一社会信用代码",
          value: false,
        },
        {
          name: "单位名称",
          value: true,
        },
        {
          name: "单位地址",
          value: false,
        },
        {
          name: "许可证编号",
          value: false,
        },
          {
          name: "经营者名称",
          value: false,
        },
        // {
        //   name: "是否特殊食品",
        //   value: false,
        // },
        // {
        //   name: "从事其他产品",
        //   value: false,
        // },
        {
          name: "注册日期",
          value: true,
        },
      ],
      total: 0,
      regionList: [
        {
          value: "320500",
          label: "苏州市",
        },
        {
          value: "320506",
          label: "吴中区",
        },

        {
          value: "320507",
          label: "相城区",
        },
        {
          value: "320505",
          label: "高新区",
        },
        {
          value: "320508",
          label: "姑苏区",
        },
        {
          value: "320509",
          label: "工业园区",
        },
        {
          value: "320581",
          label: "常熟市",
        },
        {
          value: "320582",
          label: "张家港市",
        },
        {
          value: "320583",
          label: "昆山市",
        },
        {
          value: "320584",
          label: "吴江区",
        },
        {
          value: "320585",
          label: "太仓市",
        },
        {
          value: "320592",
          label: "张家港保税区",
        },
      ],
      bodyindustryList: [
        {
          value: "食品生产经营者",
          label: "食品生产经营者",
        },
        {
          value: "食品流通经营者",
          label: "食品流通经营者",
        },
        {
          value: "餐饮服务经营者",
          label: "餐饮服务经营者",
        },
        {
          value: "单位食堂",
          label: "单位食堂",
        },
      ],
      dimension: [
        {
          value: "0",
          label: "从业人员",
        },
        {
          value: "1",
          label: "食品安全员",
        },
          {
          value: "2",
          label: "行政管理员",
        },
      ],

      Information: [
        {
          value: "1",
          label: "未到期",
        },
        {
          value: "2",
          label: "即将到期",
        },
        {
          value: "3",
          label: "已到期",
        },
        {
          value: "0",
          label: "待完善",
        },
      ],
      informationCode: [
        {
          value: "1",
          label: "绿码",
        },
        {
          value: "2",
          label: "黄码",
        },
        {
          value: "3",
          label: "红码",
        },
        {
          value: "0",
          label: "待完善",
        },
      ],

      Position: [
        {
          value: "1",
          label: "全职",
        },
        {
          value: "2",
          label: "兼职",
        },
      ],
      Status: [
        {
          value: "0",
          label: "入职申请待通过",
        },
        {
          value: "1",
          label: "已入职",
        },
        //    {
        //   value: "2",
        //   label: "游离",
        // },
      ],
      sortList: [
        {
          value: "1",
          label: "按从业人员手机号排序",
        },
        {
          value: "2",
          label: "按区域排序",
        },

        {
          value: "3",
          label: "按统一社会信用代码排序",
        },
        {
          value: "4",
          label: "按单位业态排序",
        },
        {
          value: "5",
          label: "按注册时间排序",
        },
      ],
      category: [
        {
          value: "从事食用农产品",
          label: "从事食用农产品",
        },
        {
          value: "从事冷藏冷冻农产品",
          label: "从事冷藏冷冻农产品",
        },
      ],
      tableData: [],
      dialogVisible: false,
      userData: {
        color: "#FF0000",
      },
      user: {
        datebirth: "1996-11-10",
      },
    };
  },
  // 方法
  methods: {
    onquery() {
      this.queryInfo.page = 1;
      this.query();
    },
    query() {
      this.loading = true;
      let data = this.$_.cloneDeep(this.queryInfo);
      data.isspecialfood = data.isspecialfood ? 1 : "";

      data.districtcode =
        data.districtcode == "320500" ? "" : data.districtcode;
      this.$http
        .queryPeopleInfo(data)
        .then((res) => {
          this.total = res.totalCount;
          res.data.forEach((x) => {
            for (const key in x) {
              if (!x[key]) {
                x[key] = "--";
              }
            }
          });
          this.tableData = res.data;
          this.loading = false;
        })
    },
    handleCurrentChange(e) {
      this.queryInfo.page = e;
      this.query();
    },
    download() {
      let data = this.$_.cloneDeep(this.queryInfo);
      data.isspecialfood = data.isspecialfood ? 1 : "";
      // data.districtcode =data.cityCode== "320500" ? "" : data.cityCode;
      data.districtcode =
        data.districtcode == "320500" ? "" : data.districtcode;

      this.$http
        .queryPeopleInfo(data)
        .then((res) => {
          if (res.totalCount == 0) {
            this.$error("暂无数据");
            return;
          }

          // 172.16.92.68:9031/ssa-pc-api/backsupport/exportqueryPeopleInfo?type=6
          let url = `${process.env.VUE_APP_DOWNLOAD}/backsupport/exportqueryPeopleInfo?"`;
          data.unittype.map((x) => {
            url = url + "unittype" + "=" + x + "&";
          });
          if (data.unittype.length == 0) {
            url = url + "unittype" + "=" + "&";
          }
          url = url + "nameOrmobile" + "=" + data.nameOrmobile + "&";
          url = url + "idcolor" + "=" + data.idcolor + "&";
          url = url + "jkzcolor" + "=" + data.jkzcolor + "&";
          url = url + "kscolor" + "=" + data.kscolor + "&";
          url = url + "status" + "=" + data.status + "&";
          url = url + "position" + "=" + data.position + "&";
          url = url + "codecolor" + "=" + data.codecolor + "&";
          url = url + "jurisdiction" + "=" + data.jurisdiction + "&";
          url = url + "districtcode" + "=" + data.districtcode + "&";
          url = url + "streetCode" + "=" + data.streetCode + "&";
          url = url + "bodyindustry" + "=" + data.bodyindustry + "&";
          url = url + "unitname" + "=" + data.unitname + "&";
          url = url + "type" + "=" + data.type + "&";
          url = url + "isspecialfood" + "=" + data.isspecialfood;
          // const a = document.createElement("a"); // 创建a标签
          // a.setAttribute("download", ""); // download属性
          // a.setAttribute("href", url); // href链接
          // a.click();
          this.$downloadFiles(url);
          // window.open(url)
          // console.log(url)
        })
    },
    ongoback() {
      this.$router.push("/?code=" + this.$route.query.code);
    },
    handleClick(e) {
      if (e.codecolor == 1) {
        e.color = "#008000";
      } else if (e.codecolor == 2) {
        e.color = "#FFD700";
      } else if (e.codecolor == 3) {
        e.color = "#FF0000";
      } else {
        e.color = "#000";
      }
      e.url = e.sysloginid;
      this.userData = this.$_.cloneDeep(e);
      let data = {
        params: { fSysloginid: e.sysloginid },
      };
      Promise.all([
        this.$http.findSysLoginList({
          params: { id: e.sysloginid },
        }),
        this.$http.findIdcardTableList(data),
        this.$http.findLoginUnitList(data),
        this.$http.findHealthCertificateList(data),
        this.$http.findTakePartList(data),
      ]).then((result) => {
        result.map((x) => {
          if (Array.isArray(x.data)) {
            this.user.list = x.data;
          } else {
            this.user = Object.assign(this.user, x.data);
          }
        });




        if (this.user.theimgurl) {
          // this.user.theimgurl =
          //   "https://spaq.suzhou.gov.cn/image" + this.user.theimgurl;

          if(!this.user.theimgurl.includes('ygst.etmobile.net')){
            this.user.theimgurl =
            "https://spaq.suzhou.gov.cn/image" + this.user.theimgurl;
          }

        }
        if (this.user.headurl) {
          this.user.headurl =
            "https://spaq.suzhou.gov.cn/image" + this.user.headurl;
        }

        if (this.user.validitycate) {
          this.user.validitycateNum = Math.floor(
            (new Date(this.user.validitycate).getTime() -
              new Date().getTime()) /
              1000 /
              60 /
              60 /
              24
          );
        } else {
          this.user.validuntilNum = 300;
        }
        if (this.user.validuntil) {
          this.user.validuntilNum = Math.floor(
            (new Date(this.user.validuntil).getTime() - new Date().getTime()) /
              1000 /
              60 /
              60 /
              24
          );
        } else {
          this.user.validuntilNum = 300;
        }

        if (this.user.validuntilTwo) {
          this.user.validuntilTwoNum = Math.floor(
            (new Date(this.user.validuntilTwo).getTime() -
              new Date().getTime()) /
              1000 /
              60 /
              60 /
              24
          );
        } else {
          this.user.validuntilTwoNum = 300;
        }

        if (this.userData.validuntil != "--") {
          this.userData.validuntilNum = Math.floor(
            (new Date(this.userData.validuntil).getTime() -
              new Date().getTime()) /
              1000 /
              60 /
              60 /
              24
          );
        } else {
          this.userData.validuntil = this.user.validuntil;
          this.userData.validuntilNum = this.user.validuntilNum;
        }
        this.dialogVisible = true;
      });
    },
    findListByParentCode() {
      this.$http
        .findListByParentCode({
          parentCode: this.queryInfo.cityCode,
        })
        .then((res) => {
          this.regionList = res.data;
        });
    },
    onRegionList(e) {
      if (e.length > 6) {
        this.queryInfo.streetCode = e;
        this.queryInfo.districtcode = "";
      } else {
        this.queryInfo.streetCode = "";
        this.queryInfo.districtcode = e;
      }
    },
  },
  // 监听属性
  watch: {},
  // 组件
  // 计算属性
  computed: {},
};
</script>

<style lang="less" scoped>
.container {
  padding: 20px;
  /deep/ .el-select {
    margin-bottom: 10px;
    margin-right: 10px;
    .el-select__tags {
      max-width: 192px !important;
    }
  }
  .el-input {
    margin-right: 10px;
  }
  .paginations {
    padding: 10px 0;
    text-align: right;
  }
  .el-checkbox {
    margin-right: 10px;
  }
  .red {
    color: red;
  }
  .green {
    color: green;
  }
  .yellow {
    color: #fbaf22;
  }
  //   /deep/ .el-dropdown-menu--medium {
  //     height: 500px;
  //     overflow: auto;
  //   }
  h1 {
    margin: 0;
  }
  /deep/.el-dialog__body {
    background-color: #f3f3f3;
  }
}
</style>
